<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="js/swiper-4.2.6.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="css/swiper-4.2.6.min.css"/>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/font.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/ui.css">
    <link rel="stylesheet" href="css/layui.css"  media="all">
    <script src="js/public.js" type="text/javascript" charset="utf-8"></script>
    <title></title>
    <!-- 个人中心-费用中心 -->
    <style>
        .layui-form-switch{
            margin-top: 0rem;
        }
    </style>
</head>
<body>
<div class="scroll-content2 my-costcenter" style="overflow:auto;background: #F5F5F5;">
    <div class="top-public">
        <span class="public-center">费用中心</span>
        <img src="images/left_icon.png" alt="" class="public-left">
    </div>
    <div class="top-recharge">
        <p>可用额度</p>
        <div class="sum">￥<span class="money" id="userMoney">0.00</span></div>
        <a href="my_costcenter_recharge.html">
            <div class="recharge">充值</div>
        </a>
    </div>
    <div class="not-settle">
        <span>未结清金额</span>
        <div class="money" id="notOrderMoney">￥0.00</div>
    </div>
    <a href="invoice.html">
        <div class="invoice">
            <img src="images/my-invoice.png" alt="">
            <span>发票管理</span>
        </div>
    </a>
    <div class="bill-time">
        <form class="layui-form" style="float: left;margin-right: 0.05rem;vertical-align: middle;" action="">
            <input type="checkbox" name="xxx" lay-skin="switch" id="fafa">
        </form>
        <span class="text">按账期</span>
        <span class="choice-time"></span>
    </div>
    <div class="cost-all">
        <span>消费总计</span>
        <span class="all-money" id="orderMoney">￥0.00</span>
    </div>
    <div class="cost-situation">
        <div class="cost-situation-title">消费概况</div>
        <div class="canvas-info">
            <canvas id="myCanvas" width="750" height="380" style="width:3.75rem;height:1.9rem;font-size:0.45rem;">您的浏览器不支持canvas！</canvas><br/>
            <!-- <button onclick="Start();">Start</button> -->
            <!-- <button onclick="Create();">Create</button> -->
            <div class="cost-info">
                <span>暂无消费信息</span>
            </div>
        </div>
    </div>
    <div class="date-bar">
        <div class="date-bar-top">
            <span class="close">取消</span>
            <span>月份选择</span>
            <span class="confirm">确定</span>
        </div>
        <div class="date-bar-center">
            <div class="date-box">
                <div class="date-year" onclick="monthbox(this)">2018年</div>
                <div class="date-month">
                    <ul>
                        <li class="active" onclick="szmonth(this)">1月</li>
                        <li onclick="szmonth(this)">2月</li>
                        <li onclick="szmonth(this)">3月</li>
                        <li onclick="szmonth(this)">4月</li>
                        <li onclick="szmonth(this)">5月</li>
                        <li onclick="szmonth(this)">6月</li>
                        <li onclick="szmonth(this)">7月</li>
                        <li onclick="szmonth(this)">8月</li>
                        <li onclick="szmonth(this)">9月</li>
                        <li onclick="szmonth(this)">10月</li>
                        <li onclick="szmonth(this)">11月</li>
                        <li onclick="szmonth(this)">12月</li>
                    </ul>
                </div>
            </div>
            <div class="date-box">
                <div class="date-year" onclick="monthbox(this)">2017年</div>
                <div class="date-month">
                    <ul>
                        <li onclick="szmonth(this)">1月</li>
                        <li onclick="szmonth(this)">2月</li>
                        <li onclick="szmonth(this)">3月</li>
                        <li onclick="szmonth(this)">4月</li>
                        <li onclick="szmonth(this)">5月</li>
                        <li onclick="szmonth(this)">6月</li>
                        <li onclick="szmonth(this)">7月</li>
                        <li onclick="szmonth(this)">8月</li>
                        <li onclick="szmonth(this)">9月</li>
                        <li onclick="szmonth(this)">10月</li>
                        <li onclick="szmonth(this)">11月</li>
                        <li onclick="szmonth(this)">12月</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="opacity-gray"></div>
</div>
</body>
<script src="layui/layui.js"></script>
<script>
$('.public-left').click(function(){
    // window.history.go(-1);
    window.location.href = 'my.html';
})

layui.use(['layer', 'form'], function(){
    var layer = layui.layer
    ,form = layui.form;
    layer.msg('Hello World');
    form.on('switch()', function(data){
        // console.log(data); //得到checkbox原始DOM对象
        console.log(data.elem.checked);
        if(data.elem.checked == true){
            openmonth();
        }else{
            $('.choice-time').html("");
        }
    });
});

//x,y 坐标,radius 半径,process 百分比,backColor 中心颜色, proColor 进度颜色, fontColor 中心文字颜色
function DrowProcess(x,y,radius,process,backColor,proColor,fontColor){
	var canvas = document.getElementById('myCanvas');

	if (canvas.getContext) {
		var cts = canvas.getContext('2d');
	}else{
		return;
	}

	cts.beginPath();
	// 坐标移动到圆心
	cts.moveTo(x, y);
	// 画圆,圆心是24,24,半径24,从角度0开始,画到2PI结束,最后一个参数是方向顺时针还是逆时针
	cts.arc(x, y, radius, 0, Math.PI * 2, false);
	cts.closePath();
	// 填充颜色
	cts.fillStyle = backColor;
	cts.fill();

	cts.beginPath();
	// 画扇形的时候这步很重要,画笔不在圆心画出来的不是扇形
	cts.moveTo(x, y);
	// 跟上面的圆唯一的区别在这里,不画满圆,画个扇形
	cts.arc(x, y, radius, Math.PI * 1.5, Math.PI * 1.5 -  Math.PI * 2 * process / 100, true);
	cts.closePath();
	cts.fillStyle = proColor;
	cts.fill();

	//填充背景白色
	cts.beginPath();
	cts.moveTo(x, y);
	cts.arc(x, y, radius - (radius * 0.26), 0, Math.PI * 2, true);
	cts.closePath();
	cts.fillStyle = 'rgba(255,255,255,1)';
	cts.fill();

	// 画一条线
	cts.beginPath();
	cts.arc(x, y, radius-(radius*0.30), 0, Math.PI * 2, true);
	cts.closePath();
	// 与画实心圆的区别,fill是填充,stroke是画线
	cts.strokeStyle = backColor;
	cts.stroke();

	//在中间写字
	cts.font = "bold 25pt Arial";
	cts.fillStyle = fontColor;
	cts.textAlign = 'center';
	cts.textBaseline = 'middle';
	cts.moveTo(x, y);
	cts.fillText(process+"%", x, y);

}
bfb = 0;
time=0;
function Start(){
	DrowProcess(375,200,150,bfb,'#ddd','#615FD6','#615FD6');
	t = setTimeout(Start,5);
	if(bfb>=80){
		clearTimeout(t);
		bfb=0;
		return;
	}
	bfb+=1;
}
// function Create(){
// 	DrowProcess(420,60,55,25,'#ddd','#32CD32','#32CD32');
// }

// 开启环形图
Start();
// 隐藏显示月份
function monthbox(obj){
    $(obj).siblings().toggle();
}
// 选择月份样式
function szmonth(obj){
    $('.date-month ul li').removeClass('active');
    $(obj).addClass('active');
}
// 开启月份弹窗
function openmonth(){
    $('.date-bar').css("display","block");
    $('.opacity-gray').show();
}
// 取消 关闭月份弹窗
$('.date-bar-top .close').click(function(){
    $('.date-bar').css("display","none");
    $('.opacity-gray').hide();
});

// 确定选择的月份
$('.date-bar-top .confirm').click(function(){
    var m = $('.active').html();
    var y = $('.active').parent().parent().siblings().html();
    var ym = y + m;
    $('.choice-time').html(ym);


    $('.date-bar').css("display","none");
    $('.opacity-gray').hide();
})

</script>

<script>
    $(function(){
        //验证是否登陆
        var user_id = sessionStorage.getItem('userId');
        if (user_id == null) {
            alert('请先登录！');
            window.location.href = 'login.html';
        }
        //充值列表
        rechargeList();
    });

    function rechargeList() {
        var user_id = sessionStorage.getItem("userId");
        $.ajax({
            url: url() + 'api/users/balanceNot', //请求的url地址
            dataType: "JSON", //返回格式为json
            async: true, //请求是否异步，默认为异步，这也是ajax重要特性
            type: "POST", //请求方式
            data:{
                user_id:user_id,
            },
            success: function (data) {
                // console.log(data);
                //请求成功时处理
                $('#userMoney').html(data.userMoney);
                $('#notOrderMoney').html('￥'+data.notOrderMoney);
                $('#orderMoney').html('￥'+data.orderMoney);

            }
        });
    }


</script>

</html>






